<template>
  <van-collapse v-model="activeName">
    <van-collapse-item :name="item.id">
      <template #title>
        <div class="font-bold text-blue-500">
          <div>账号：{{ item.username }}</div>
        </div>
      </template>

      <div class="flex justify-between items-center">
        <div class="font-bold">
          <div>昵称：{{ item.nickname }}</div>
          <div>注册时间：{{ dayjs(item.create_time * 1000).format('YYYY-MM-DD HH:mm:ss') }}</div>
        </div>

        <div class="flex flex-col justify-center items-center gap-2 text-sm">
          <button
            @click="showInfo"
            class="border rounded border-white bg-green-400 py-1 px-2 text-white"
          >
            拷贝信息
          </button>
          <button
            @click="showEdit = true"
            class="border rounded border-white bg-green-400 py-1 px-2 text-white"
          >
            设置费率
          </button>
        </div>
      </div>

      <div v-if="item.children && item.children.length > 0" class="pl-2 mt-2 border-t">
        <Item :item="child" :copyInfo="copyInfo" v-for="child in item.children" :key="child.id" />
      </div>
      <div v-else class="border p-1 rounded shadow mt-2">暂无下级</div>
    </van-collapse-item>
  </van-collapse>

  <userInfoModal :show="show" :data="item" :copyInfo="copyInfo" @close="show = false" />
  <editRateModel v-model:showModal="showEdit" :id="item.id" @close="showEdit = false" />
</template>
<script setup lang="ts">
import dayjs from 'dayjs'
import { ref } from 'vue'
import Item from './Item.vue'

import userInfoModal from '../modal/userInfo.vue'
import editRateModel from '../modal/editRate.vue'

const activeName = ref([])
const show = ref(false)
const showEdit = ref(false)

defineProps({
  item: {
    type: Object,
    default: () => ({})
  },
  copyInfo: {
    type: Object,
    default: () => ({})
  }
})

function showInfo() {
  show.value = true
}
</script>
